//计数器组件
const Counter = Vue.defineComponent({
	props:{
		value:Number,
		min:Number,
		max:Number
	},
	data() {
		return {
			count: this.value||0
		}
	},
	watch:{
		count(){
			// 通知父组件 事件名称,数据
			this.$emit('update:value',this.count)
		}
	},
	methods:{
		add(){ //加
			if(typeof this.max == 'number'){
				if(this.count < this.max)this.count++
			}else{
				this.count++
			}
		},
		sub(){ //减法
			if(typeof this.min == 'number'){
				if(this.count > this.min)this.count--
			}else{
				this.count--
			}
		}
	},
	template: `
	<div class="counter-container" id="app">
		<button @click="sub" id="decrement-btn">-</button>
		<span id="counter-value">{{ count }}</span>
		<button @click="add" id="increment-btn">+</button>
	</div>
	`
})